<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Tigua Reference</title>
        <meta http-equiv="content-language" content="en">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="author" content="David M. Lopez">
        <meta name="description" content="Canvas JavaScript Library">
        <meta name="keywords" content="JavaScript Library, Tigua, Canvas">
        <meta name="viewport" content="width=450; user-scalable=no">
        <link rel="stylesheet" type="text/css" media="screen,print" href="../util/log4javascript/main.css" title="Default" />
        <script src="../util/log4javascript/log4javascript.js" type="text/javascript" charset="utf-8"></script>
        <script src="../tigua.js" type="text/javascript" charset="utf-8"></script>

        <script>

        function startup() {
          var popuplog = false;
          if (popuplog) {
            var log = log4javascript.getDefaultLogger("main");
          } else {
            var log = log4javascript.getLogger("main");
            var appender = new log4javascript.BrowserConsoleAppender();
            appender.setLayout(new log4javascript.PatternLayout(log4javascript.ABSOLUTETIME_DATEFORMAT));
            log.addAppender(appender);
          }

          //attach to existing canvas in page
          var c = new tigua.canvas('cnvs');

          log.debug("Drawing tests");

          function background(config) {
            tigua.component.call(this,config);            
          }
          background.prototype = new tigua.component;
          background.prototype.render = function (ctx) {
            if (!this.lingrad) {
              this.lingrad = ctx.createLinearGradient(0,0,this.width,this.height);  
              this.lingrad.addColorStop(0.0, new tigua.color({h:36*5, s:100,v:75}));
              this.lingrad.addColorStop(1.0, new tigua.color({h:36*7, s:100,v:75}));
            } 
            ctx.fillStyle = this.lingrad;
            ctx.fillRect(0,0,this.width,this.height);
          }
          
          var b = new background({id:'background'});
          c.setBackground(b);
          //c.setBackground("#FFFFFF");

         function anim_callback(c,attr,task) {
             if (task.to == 50) {
                 c.toX = 10;
                 c.toY = 10;
                 c.toW = 192;
                 c.toH = 260;
             } else {
                 c.toX = 240;
                 c.toY = 240;
                 c.toW = 50;
                 c.toH = 50;
             }
             c.angle = 0;
         }

         var b = new tigua.image({
             src: 'avatar.png',
             x:10,
             y:10,
             toW:50,
             toH:50,
             toX:240,
             toY:240,
             listeners: {
                 'click': function() {
                     this.moveTo(this.toX,this.toY,1000,'bounce');
                     this.sizeTo(this.toW,this.toH,1000,'bounce',anim_callback);
                     this.rotateTo(Math.PI*2,1000,'bounce');
                 }
             }
         });

         c.addComponent(b);

          c.render();
          //c.startAnimation(10);
        }
        </script>
    </head>
    <body onload="startup();">
      <canvas id="cnvs" width="300" height="300"></canvas>
    </body>
</html>
